<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Field Trip实地考察</title>
    <!-- 实地考察 -->
    <!-- 基本信息界面 -->
    <!-- 引入样式 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
</div>

<div id="tableView">
    <!--列表顶部搜索和工具条-->
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">

            <el-form-item label="单位名称">
                <el-input v-model="searchForm.inspection" placeholder="请输入单位名称查询"></el-input>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" icon="search" @click="searchClick">查询</el-button>
                <el-button type="success" icon="plus" @click="addClick">新增</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <!--列表-->
    <el-row>
        <el-table :data="tableData"  v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="编号" width="105"></el-table-column>
            <el-table-column prop="inspection" label="单位名称" width="150"></el-table-column>
            <el-table-column prop="starttime" label="开始时间" width="130"></el-table-column>
            <el-table-column prop="score" label="分数设置" width="100"></el-table-column>
            <el-table-column prop="assessment" label="测评项目" width="300"></el-table-column>
            <!--<el-table-column prop="fieldid" label="" width="120"></el-table-column>-->



            <el-table-column
                    label="操作">
                <template scope="scope">
                    <el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">查看</el-button>
                    <el-button :plain="true" type="danger" size="small" icon="delete" @click="deleteClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>

    <!--列表底部工具条和分页符-->
    <el-row style="margin-top: 20px" type="flex" justify="end">
        <el-col :span="6" >
            <el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelection">删除所选</el-button>
        </el-col>
        <el-col :span="18" >
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[6,12,18,24]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>



    <!--查看界面-->
    <el-dialog title="查看" :visible.sync="editFormVisible" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-form-item label="考察单位" prop="inspection">
                <el-input v-model="editForm.inspection" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="测评项目" prop="assessment">
                <el-input v-model="editForm.assessment" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="得分数" prop="score">
                <el-input v-model="editForm.score" auto-complete="off" disabled></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
        </div>
    </el-dialog>




</div>


<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
        message: '实地考察'
    }
    });

    var tableView = new Vue({
        el: '#tableView',
        data: {
            //列表数据
            tableData: [],
            //显示加载中样式
            loading:false,
            //搜索表单
            searchForm: {
                inspection:"",
            },
            //多选值
            multipleSelection: [],
            //当前页
            currentPage:1,
            //分页大小
            pageSize:6,
            //总记录数
            total:800,
            //删除的弹出框
            deleteVisible:false,
            //编辑界面是否显示
            editFormVisible: false,
            editLoading: false,
            goUrl:'',
            editFormRules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ]
            },
            //编辑界面数据
            editForm: {
                id:"",
                inspection:"",
                starttime:"",
                score:"",
                assessment:"",
                fieldid:""
            },
        },
        created:function(){
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            var self = this;
            var start =(this.currentPage-1)*this.pageSize;
            axios.post('/trip/list',{'start':start,'pageSize':this.pageSize}).then(function(response){

                self.total=response.data.total;
                self.tableData = response.data.data;

            })
        },
        methods:{
            //表格重新加载数据
            loadingData:function() {
                var _self = this;
                _self.loading = true;
                //var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var searchForm={'start':start,'pageSize':this.pageSize,'inspection':this.inspection};
                axios.post('/trip/list',searchForm).then(function(response){
                    console.log(response.data);
                    //alert(response.data);
                    _self.total=response.data.total;
                    _self.tableData = response.data.data;

                })
                console.log(_self.currentPage);
                setTimeout(function(){
                    console.info("加载数据成功");
                    _self.loading = false;
                },300);
            },
            //表格编辑事件
            editClick:function(row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            //表格删除事件
            deleteClick:function(row) {
                var _self = this;
                this.$confirm('确认删除' + row.id +'吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    var  url="/trip/del?id="+row.id;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if(response.data>0){
                            _self.$message({
                                message: row.id + '号删除成功',
                                type: 'success'
                            });

                        }
                    });
                    _self.loadingData();//重新加载数据
                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },
            //新建事件跳转界面
            addClick:function() {
                //this.goUrl="trip/add";
                //return "Declarationmanagement/EditField";
                window.location.href="/trip/add";
                //var _self = this;
                //this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                //_self.loadingData();//重新加载数据
            },
            //表格查询事件
            searchClick:function() {
                var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.currentPage*this.pageSize+1;
                var searchForm={'start':start,'pageSize':this.pageSize,'id':this.id,'inspection':this.searchForm.inspection};
                //formData.push({'start':start}).push({'end':end})
                axios.post('/trip/list',searchForm).then(function(response){
                    // console.log(response.data);
                    //alert(response.data.total);
                    self.total=response.data.total;
                    self.tableData = response.data.data;
                    // self.multipleSelection=response.data.data;
                })
                //self.loadingData();//重新加载数据
            },
            //表格勾选事件
            selectionChange:function(val) {
                for(var i=0;i<val.length;i++) {
                    var row = val[i];
                }
                this.multipleSelection = val;
                console.info(val);
            },
            //删除所选，批量删除
            removeSelection:function() {
                var _self = this;
                var multipleSelection = this.multipleSelection;
                if(multipleSelection.length < 1) {
                    _self.$message({
                        message: '请至少选中一条记录',
                        type: 'error'
                    });
                    return;
                }
                var ids = "";
                for(var i=0;i<multipleSelection.length;i++) {
                    var row = multipleSelection[i];
                    ids += row.id + ","
                }
                this.$confirm('确认删除' + ids +'吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    var  url="/emp/batchDel/"+ids;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        var temp="";
                        if(response.data>0){
                            temp="删除成功";
                        }else {
                            temp="删除失败";
                        }
                        _self.$message({
                            message: ids + temp,
                            type: 'success'
                        });
                        _self.loadingData();//重新加载数据
                    });

                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },
            //分页大小修改事件
            pageSizeChange:function(val) {
                console.log('每页 ' + val +' 条');
                this.pageSize = val;
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //当前页修改事件
            currentPageChange:function(val) {
                this.currentPage = val;
                console.log('当前页: ' + val);
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //保存点击事件
            editSubmit:function(){
                var _self = this;
                _self.loading = true;
                var formData =this.editForm;
                //alert(formData);
                var goUrl=this.goUrl;
                //alert(goUrl);
                //alert(JSON.stringify(formData));
                axios.post(goUrl,formData).then(function(response){
                    // console.log(response.data);
                    // alert(222);
                    // self.total=response.data.total;
                    if(response.data>0){
                        _self.editFormVisible = false;// 让弹出层隐藏
                        _self.loadingData();//重新加载数据
                    }
                })
                console.info(this.editForm);
            }
        }

    })
</script>

</body>
</html>